import {
    SafeAreaView,
    FlatList,
    View,
    Text,
    StyleSheet,
    TouchableOpacity
} from 'react-native';
import React, {Component} from 'react';
import Colors from 'react-native/Libraries/NewAppScreen/components/Colors';
import Ionicons from 'react-native-vector-icons/Ionicons';
class ComponentsPage extends Component {
    constructor(props) {
        super(props);
    }
    DATA = [
        {
            id: '0',
            title: '圆形loading',
            url: 'ActivityIndicator'
        },
        {
            id: '1',
            title: '按钮',
            url: 'buttonPage'
        },
        {
            id: '2',
            title: '高性能的简单列表组件',
            url: 'FlatListPage'
        },
        {
            id: '3',
            title: '图片组件',
            url: 'ImagePage'
        },
        {
            id: '4',
            title: '背景图片组件',
            url: 'ImageBackgroundPage'
        },
        {
            id: '5',
            title: '解决手机上弹出的键盘常常会挡住当前的视图',
            url: 'KeyboardAvoidingViewPage'
        },
        {
            id: '6',
            title: 'modal弹窗',
            url: 'ModalPage'
        },
        {
            id: '7',
            title: '事件过程控制和监测',
            url: 'PressablePage'
        },
        {
            id: '8',
            title: '下拉刷新组件',
            url: 'RefreshControlPage'
        },
        {
            id: '9',
            title: '安全区域组件',
            url: 'SafeAreaViewPage'
        },
        {
            id: '10',
            title: ' ScrollView（滚动视图）的组件',
            url: 'ScrollViewPage'
        },
        {
            id: '11',
            title: '高性能的分组(section)列表组件',
            url: 'SectionListPage'
        },
        {
            id: '12',
            title: '控制应用状态栏的组件',
            url: 'StatusBarPage'
        },
        {
            id: '13',
            title: '跨平台通用的“开关”组件',
            url: 'SwitchPage'
        },
        {
            id: '14',
            title: '文本组件',
            url: 'TextPage'
        },
        {
            id: '15',
            title: '输入框',
            url: 'TextInputPage'
        },
        {
            id: '16',
            title: '点击视图变暗',
            url: 'TouchableHighlightPage'
        },
        {
            id: '17',
            title: '点击视图透明度变低',
            url: 'TouchableOpacityPage'
        },
        {
            id: '18',
            title: 'seclist和flatlist的滚动视图的实现',
            url: 'VirtualizedListPage'
        }
    ];
    styles = StyleSheet.create({
        Item:{
            flexDirection: 'row',
            justifyContent: 'space-between',
            padding: 20,
            backgroundColor: '#ffffff',
            borderBottomColor: '#87ceeb',
            borderBottomWidth: 1
        },
        ItemText:{
            fontSize: 14,
            color: Colors.dark
        },
        img: {
            width: 14,
            height: 14
        },
        imgBox: {
            width: 40,
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'center',
            height: 20
        },
        title: {
            height: 50,
            paddingLeft: 10,
            flexDirection: 'row',
            alignItems: 'center',
            backgroundColor: 'skyblue',
            shadowColor: '#000',  //设置阴影色
            shadowOffset:{width:0,height:10},  //设置阴影偏移,该值会设置整个阴影的偏移，width可以看做x,height可以看做y,x向右为正，y向下为正
            shadowOpacity: 1,
            elevation:2,
            shadowRadius: 1.5
        },
        titleText: {
            fontSize: 20,
            color: Colors.white,
            fontWeight: 'bold'
        },
        container: {
            flex: 1
        }
    })
    _createItem = ({ title,url }) => {
        return (

            <TouchableOpacity onPress={this._onPressButton(url,title)}>
                <View style={this.styles.Item}>
                    <Text style={this.styles.ItemText}>{title}</Text>
                        <View style={this.styles.imgBox}>
                            <Ionicons  color={Colors.dark}
                                name={'arrow-redo'}
                                size={16}
                            />
                        </View>
                </View>

            </TouchableOpacity>
        );
    }
    _renderItem = ({ item }) => this._createItem(item);
    _onPressButton = (url,title)=> {
        return ()=>{
            this.props.navigation.navigate(url, {
                title: title
            });
        };
    }
    render(){
        return (
            <SafeAreaView style={this.styles.container}>
                <View style={this.styles.title}>
                    <Text style={this.styles.titleText}>所有的核心组件和功能</Text>
                </View>
                    <FlatList
                        data={this.DATA}
                        keyExtractor={item => item.id}
                        renderItem={this._renderItem}
                    />
            </SafeAreaView>
        );
    }
}

export default ComponentsPage;
